<template>
	<view :class="relative=='true'?`suspension-h5`:`suspension`" :style="style">
		<slot></slot>
	</view>

</template>
<script>
	export default{
		data(){
			return{
				style:"",
				relative_top:0,
			}
		},
		props:{
			//相对固定
			relative:{
				type:Boolean,
				default:false
			},
			is_position:{
				type:Boolean,
				default:true
			},
			top:{
				type:Number,
				default:0,
			},
			left:{
				type:Number,
				default:0,
			},
			right:{
				type:Number,
				default:0,
			},
			bottom:{
				type:Number,
				default:0
			}
		},
		created(){
			if(this.relative){
				let str = "";
				
				if(this.left&&this.left!=''){
					str +="margin-left: "+this.left+"rpx;"
				}
				if(this.top&&this.top!=''){
					str +="margin-top: "+this.top+"rpx;"
				}
				if(this.right&&this.right!=''){
					str +="margin-right: "+this.right+"rpx;"
				}
				if(this.bottom&&this.bottom!=''){
					str +="margin-bottom: "+this.bottom+"rpx;"
				}
				this.style = str
				
			}else{
				if(this.is_position){
					let str = "";
					if(this.left&&this.left!=''){
						str +="left: "+this.left+"rpx;"
					}
					if(this.top&&this.top!=''){
						str +="top: "+this.top+"rpx;"
					}
					if(this.right&&this.right!=''){
						str +="right: "+this.right+"rpx;"
					}
					if(this.bottom&&this.bottom!=''){
						str +="bottom: "+this.bottom+"rpx;"
					}
					this.style = str
				}else{
					var res = uni.getSystemInfoSync();
					let str = "";
					if(this.left&&this.left!=''){
						str +="left: "+this.left+"rpx;"
					}
					if(this.right&&this.right!=''){
						str +="right: "+this.right+"rpx;"
					}
					if(this.bottom&&this.bottom!=''){
						console.log(res.windowHeight);
						this.relative_top = (res.windowHeight*2-this.bottom);
						// str +="bottom: "+this.bottom+"rpx;"
					}
					if(this.top&&this.top!=''&&this.relative_top==0){
						str +="top: "+this.top+"rpx;"
					}
					if(this.relative_top!=0){
						str +="top: "+this.relative_top+"rpx;"
					}
					this.style = str
				}

			}
		},
		methods:{
			
		}
	}
</script>
<style>
	.suspension-h5{
		position: relative;
	}
	.suspension{
		position: fixed;
	}
</style>
